<template>
	<text
		class="u-link"
		@click.stop="openLink"
		:style="{
			color: color,
			fontSize: fontSize + 'rpx',
			borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
			paddingBottom: underLine ? '0rpx' : '0'
		}"
	>
		<slot></slot>
	</text>
</template>

<script>
/**
 * link 超链接
 * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
 * @tutorial https://www.uviewui.com/components/link.html
 * @property {String} color 文字颜色（默认#606266）
 * @property {String Number} font-size 字体大小，单位rpx（默认28）
 * @property {Boolean} under-line 是否显示下划线（默认false）
 * @property {String} href 跳转的链接，要带上http(s)
 * @property {String} line-color 下划线颜色，默认同color参数颜色
 * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
 * @example <u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link>
 */
export default {
	name: 'u-link',
	props: {
		// 文字颜色
		color: {
			type: String,
			default: '#2979ff'
		},
		// 字体大小，单位rpx
		fontSize: {
			type: [String, Number],
			default: 28
		},
		// 是否显示下划线
		underLine: {
			type: Boolean,
			default: false
		},
		// 要跳转的链接
		href: {
			type: String,
			default: ''
		},
		// 小程序中复制到粘贴板的提示语
		mpTips: {
			type: String,
			default: '链接已复制，请在浏览器打开'
		},
		// 下划线颜色
		lineColor: {
			type: String,
			default: ''
		}
	},
	methods: {
		openLink() {
			// #ifdef APP-PLUS
			plus.runtime.openURL(this.href);
			// #endif
			// #ifdef H5
			window.open(this.href);
			// #endif
			// #ifdef MP
			uni.setClipboardData({
				data: this.href,
				success: () => {
					uni.hideToast();
					this.$nextTick(() => {
						this.$u.toast(this.mpTips);
					});
				}
			});
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';

.u-link {
	line-height: 1;
}
</style>
